<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单验证</title>
</head>
<body>
	<form action="" method="">
		<div class="form-group">
			<label for="">邮箱</label>
			<input type="text" data-verify-mail="32,163.com|vip.163.com,请使用163邮箱注册!" />
		</div>
		<div class="form-group">
			<label for="">账号</label>
			<input type="text" data-verify-len="6|10,长度6-10位!" />
		</div>
		<div class="form-group">
			<label for="">必填项</label>
			<input type="text" data-verify-require="" />
		</div>
		<div class="form-group">
			<label for="">数字类型</label>
			<input type="text" data-verify-type="2,此项必须为数字!" />
		</div>
		<div class="form-group">
			<label for="">主</label>
			<input type="text" data-verify-depend="#depend_1|#depend_2,主和依赖对象都需要填写" />
		</div>
		<div class="form-group">
			<label for="">依赖</label>
			<input type="text" id="depend_1" />
		</div>
		<div class="form-group">
			<label for="">依赖</label>
			<input type="text" id="depend_2" />
		</div>
		<div class="form-group">
			<label for="">密码</label>
			<input id="pass" type="text" data-verify-len="8|32" />
		</div>
		<div class="form-group">
			<label for="">确认密码</label>
			<input type="text" data-verify-pass="#pass,两次密码不同!" data-verify-len="8|32" />
		</div>
		<div class="form-group">
			<label for="">图形验证码</label>
			<input id="code" type="text" data-verify-code="4,请填写4位验证码!" />
		</div>
		<div class="form-group">
			<label for="">手机号码</label>
			<input id="phone" type="text" name="phone_number" data-verify-phone />
			
		</div>
		<div class="form-group">
			<button type="button" data-verify-smscode="#code|#phone,#phone,手机号码和图形验证码必须正确!">获取手机验证码</button>
		</div>
		<div class="form-group">
			<label class="text-muted">
				<input type="checkbox" data-verify-check="必须同意本协议才能完成!" />同意本协议
			</label>
		</div>
		<div class="form-group">
			<button type="submit"/>提交</button>
		</div>
	</form>
	<script type="text/javascript" src="./jquery.min.js"></script>
	<script type="text/javascript" src="./validate_form.js"></script>
	<script>
		$("form").validateForm({
			smscode:function(conf){
				console.log(conf);
			},
			submit:function(form){
				$.post("/api.php",$(form).serialize(),function(res){

				});
			},
			render:function(conf){
				var r = conf.verify,mess = conf.mess, el = conf.elem;
				$(el).nextAll().remove();
				if (r) {
				} else {
					if (mess instanceof Array) {
						for (var i = 0; i < mess.length; i++) {
							$(el).parent().append("<p style='color:red;'>"+mess[i]+"</p>");
						}
					} else {
						$(el).parent().append("<p style='color:red;'>"+mess+"</p>");
					}
				}
			}
		});
	</script>
</body>
</html>